<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    html {
        background-color: rgba(0, 0, 0, 0.1);
    }
    body {
        margin: 5px auto;
        margin-top: 15px;
        margin-bottom: 50px;
        width: 700px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        border-radius: 8px;
        padding: 8px;
        font-family: sans-serif;
        background-color: white;
    }
    div {
        display: inline-block;
    }
    img {
        width: 200%;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
    hr {
        border: none;
        border-bottom: 1px dashed gray;
    }
    p {
        margin: 5px;
    }
    </style>
</head>
<body>
    <section>
    Hint: Right click, Save Image As...
    <hr>
    <p>4x4</p>
    <div><img src="etc/4x4.png"></div>
    <hr>
    <p>4x4plus</p>
    <div><img src="etc/4x4plus.png"></div>
    <hr>
    <p>4x4plus</p>
    <div><img src="etc/grass4x4plus.png"></div>
    <hr>
    <p>rpgmaker</p>
    <div><img src="etc/grassrpgmaker.png"><br><img src="etc/mountainsrpgmaker.png"><br><img src="etc/waterrpgmaker.png"></div>
    <hr>
    <p>minitiles</p>
    <div><img src="etc/mini.png"><br><img src="etc/minitiles-grass.png"></div>
    <hr>
    <p>minitiles (need to use margin offset)</p>
    <div><img src="etc/marginexample.png"></div>
    <hr>
    <p>minitiles (32x32)</p>
    <div><img src="etc/minitiles-32.png"></div>
    <hr>
    <p>5x3</p>
    <div><img src="etc/5x3.png"></div>
    <hr>
    <p>5x2</p>
    <div><img src="etc/5x2.png"></div>
    </section>
</body>
</html>